<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/3
  Time: 9:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订票第三步</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.useso.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <link href="css/gozha-nav.css" rel="stylesheet" />
    <link href="css/external/jquery.selectbox.css" rel="stylesheet" />
    <link href="css/style.css?v=1" rel="stylesheet" />
    <script src="js/external/modernizr.custom.js"></script>
</head>
<body>
<div class="wrapper">
    <!-- 头部导航栏-->
    <hearder>
        <jsp:include page="header.jsp"></jsp:include>
    </hearder>
    <!-- 搜索框-->
    <jsp:include page="search.jsp"></jsp:include>


    <!-- Main content -->
    <section class="container">
        <div class="order-container">
            <div class="order">
                <img class="order__images" alt='' src="images/tickets.png">
                <p class="order__title">订一张票 <br><span class="order__descript">享受快乐的电影时光</span></p>
                <div class="order__control">
                    <a href="book3-buy.html" class="order__control-btn">购买</a>

                </div>
            </div>
        </div>
        <div class="order-step-area">
            <div class="order-step first--step order-step--disable ">1.什么？何时何地？</div>
            <div class="order-step second--step order-step--disable">2.选择坐席</div>
            <div class="order-step third--step">3. 结算</div>
        </div>

        <div class="col-sm-12">
            <div class="checkout-wrapper">
                <h2 class="page-heading">价格</h2>
                <ul class="book-result">
                    <li class="book-result__item">票数: <span class="book-result__count booking-ticket">3</span></li>
                    <li class="book-result__item">单价: <span class="book-result__count booking-price">$20</span></li>
                    <li class="book-result__item">订票费: <span class="book-result__count">$3</span></li>
                    <li class="book-result__item">总计: <span class="book-result__count booking-cost">$69</span></li>
                </ul>

                <h2 class="page-heading">联系信息</h2>

                <form id='contact-info' method='post' novalidate="" class="form contact-info">
                    <div class="contact-info__field contact-info__field-mail">
                        <input type='email' name='user-mail' placeholder='您的邮箱' class="form__mail">
                    </div>
                    <div class="contact-info__field contact-info__field-tel">
                        <input type='tel' name='user-tel' placeholder='电话号码' class="form__mail">
                    </div>
                </form>

                <p class="reservation-message">填写您的联系信息，以收到您的预订代码。预定的票将在会话开始前20分钟取消。</p>

            </div>

            <div class="order">
                <a href="book-final.html" class="btn btn-md btn--warning btn--wide">支付</a>
            </div>

        </div>

    </section>



    <!-- 底部-->
    <jsp:include page="footer.jsp"></jsp:include>




<!-- JavaScript-->
<!-- jQuery 1.9.1-->
<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/external/jquery-1.10.1.min.js"><\/script>')</script>
<!-- Migrate -->
<script src="js/external/jquery-migrate-1.2.1.min.js"></script>
<!-- Bootstrap 3-->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

<!-- Mobile menu -->
<script src="js/jquery.mobile.menu.js"></script>
<!-- Select -->
<script src="js/external/jquery.selectbox-0.2.min.js"></script>

<!-- Form element -->
<script src="js/external/form-element.js"></script>
<!-- Form validation -->
<script src="js/form.js"></script>

<!-- Custom -->
<script src="js/custom.js"></script>
</body>
</html>
